<template>
	<view class="footerView">
		<view class="footerView-conter">
			<view class="footerView-conter-item">
				<view class="footerView-conter-item-title">快速链接</view>
				<view class="itemUl">
					<view class="itemLi" v-for="(item, index) in meunList" :key="index" @click="toPath(item)">{{ item.name }}</view>
				</view>
			</view>

			<view class="footerView-conter-item">
				<view class="footerView-conter-item-title">产品系列</view>
				<view class="itemUl">
					<view class="itemLi" v-for="(item, index) in productList" :key="index">{{ item.name }}</view>
				</view>
			</view>

			<view class="footerView-conter-item">
				<view class="footerView-conter-item-title">联系我们</view>
				<view class="itemUl">
					<view class="itemLi">客服热线：400-888-9999</view>
					<view class="itemLi">工作时间：9:00-18:00</view>
					<view class="itemLi">电子邮箱：service@remax.com</view>
					<view class="itemLi itemIcon">
						<u-icon customPrefix="custom-icon custom-icon-whatsapp" size="22px"></u-icon>
						<u-icon customPrefix="custom-icon custom-icon-ins" size="22px"></u-icon>
						<u-icon customPrefix="custom-icon custom-icon-facebook-messenger" size="22px"></u-icon>
						<u-icon customPrefix="custom-icon custom-icon-a-tuite2" size="22px"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
// 菜单列表
const meunList = ref([
	{ path: 'pages/home/index', name: 'Home' },
	{ path: 'pages/products/index', name: 'Products' },
	{ path: 'pages/aboutUs/index', name: 'About Us' },
	{ path: 'pages/contactUs/index', name: 'Contact Us' }
]);

const productList = ref([
	{ path: 'pages/products/index', name: '现代简约系列' },
	{ path: 'pages/products/index', name: '传统经典系列' },
	{ path: 'pages/products/index', name: '民族风情系列' }
]);

const toPath = (item) => {
	uni.navigateTo({
		url: `/${item.path}`
	});
};
</script>

<style scoped lang="scss">
.footerView {
	width: 100%;
	height: auto;
	background-color: #111827;

	&-conter {
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		padding: 20px 0;
		display: flex;
		align-items: start;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 20px;

		&-item {
			flex: 1;
			flex-shrink: 1;
			padding-left: 20px;
			box-sizing: border-box;

			&-title {
				width: 100%;
				height: auto;
				font-family: Roboto, Roboto;
				font-weight: 700;
				font-size: 18px;
				color: #ffffff;
				line-height: 1.6;
				margin-bottom: 10px;
			}

			.itemUl {
				width: 100%;
				height: auto;
				display: flex;
				flex-direction: column;
				gap: 10px;

				.itemLi {
					width: 100%;
					height: auto;
					font-family: Roboto, Roboto;
					font-weight: 400;
					font-size: 14px;
					color: #ffffff;
					line-height: 1.6;
					cursor: pointer;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					gap: 10px;
					text-wrap: nowrap;

					&:hover {
						color: #b7922d;
					}

					&.itemIcon {
						&:hover {
							color: #ffffff;
						}
					}

					.u-icon:hover {
						transform: scale(1.2);
					}
				}
			}
		}
	}
}
</style>
